import React from 'react';
import  { Component } from 'react';
// import UserHeader from '../../Component/UserHeader/UserHeader';
import Banner from '../../Component/Banner/Banner';
import Bar from '../../Component/Bar';
import "./Home.css";
import "../../Common/css/a/a.css";
import Blank from '../../Component/Blank';
import RightSVG from '../../Common/svg/Right';
import SortSVG from '../../Common/svg/Sort';
import { Radio } from 'antd';
import GoodNode from '../../Component/Good';
import ImageBox from '../../Component/ImageBox';
import NoWrap from '../../Component/NoWrapContainer';
import Footer from '../../Component/Footer/Footer';
import Carousel from '../../Component/Carousel/Carousel';
// import {  TitleMneu } from "../../Common/js/common";
import StudyInfo from '../../Component/StudyInfo';
import { Icon } from 'antd';
import Experts from '../../Server/Experts';
import Consulting from '../../Server/Consulting';
import HeaderLayout from '../../Layout/HeaderLayout';
import AOPA from '../../Component/AOPA';
import FlyCourse from '../../Component/FlyCourse';
import SortTabItem from '../../Component/SortTabItem';

class Home extends Component {
    constructor(props){
        super();
        document.title = "首页";

        this.state={
            infoSelect:"Home_HotSpot_Content HomeHotSpotActive",
            lawSelect:"",
            ExpertsData:[], //专家列表
            Info:[], //行业资讯
            Law:[], //法律法规
        };

        //初始化数据
        Experts.HomeRecommendedExperts()
        .then(response=>{
            let data=[];
            response.data.forEach(i => {
                data.push({name:i.expertsCertificationName,img:i.expertsCertificationOneselfImg})
            });
            // console.log(data);
        });

        this.SwitchInfo();
    }
    //行业资讯，法律法规点击事件
    SwitchInfo(e){
        this.setState({
                infoSelect:"selected",
                lawSelect:""
        });

        Consulting.SelectListConsulting(0)
        .then(response=>{
            let data=[];
            response.data.forEach(i => {
                data.push({
                    id:i.consultingId,
                    title:i.consultingTitle,
                    time:i.consultingTime
                });
            });
            this.setState({
                Info:data
            });
            // console.log(data);
        });
    }
    SwitchLaw(e){
        this.setState({
            lawSelect:"selected",
            infoSelect:""
        });
        Consulting.SelectListConsulting(1)
        .then(response=>{
            let data=[];
            response.data.forEach(i => {
                data.push({
                    id:i.consultingId,
                    title:i.consultingTitle,
                    time:i.consultingTime
                });
            });
            this.setState({
                Law:data
            });
            // console.log(data);
        });
    }
  render() {
    let showTabInfoVisible="";
    let showTabInfoLow="";
    if(this.state.infoSelect===''){
        showTabInfoVisible="none";
    }
    if(this.state.lawSelect===""){
        showTabInfoLow="none";
    }

    //行业资讯
    let key=0;
    let info=[];
    this.state.Info.forEach(i=>{
        info.push(<li key={key++} data-id={i.id}>
            <NoWrap className="Home_HotSpot_Word" data={i.title}/><br/>
        <span className="Home_HotSpot_Date">{i.time}</span>
        </li>);
    });

    //法律法规
    let law=[];
    this.state.Law.forEach(i=>{
        law.push(<li data-id={i.id}>
            <NoWrap className="Home_HotSpot_Word" data={i.title}/><br/>
        <span className="Home_HotSpot_Date">{i.time}</span>
        </li>);
    });

    return (
      <div className="Home_Main">
          <HeaderLayout activeID={0}/>
          <Banner src="/assets/home/p1.png" alt=""/>
          <div className="Home_Trade_Info ">
              <div className="Home_Trade_Info_Grey">I WANT TO TRADE</div>
              <h2><Bar/>我要交易<Bar/></h2>
              <div className="Home_Trade_Info_Grey">公司介绍什么的公司介绍什么的公司介绍什么的公司介绍什么的公司介绍什么的公司介</div>
          </div>
          <div id="Home_Goods" className="Home_Goods Main_Container">
            <div id="Home_Goods_Link" className="Home_Goods_Link">
                <div className="flexContainer">
                    <button type="button" className="Home_Link_Button"><span>二手交易</span></button>
                    <button type="button" className="Home_Link_Button_Normal"><span>维修服务</span></button>
                    <button type="button" className="Home_Link_Button_Normal"><span>租赁服务</span></button>
                    <Blank/> 
                    <a href="/"><span>查看更多 <RightSVG/></span></a>
                </div>
                <div className="Home_Sort">
                    <span className="Home_Sort_Item"><SortTabItem title="综合"/></span>
                    <span className="Home_Sort_Item"><SortTabItem title="信用"/></span>
                    <span className="Home_Sort_Item"><SortTabItem title="价格"/></span>
                    <span className="Home_Sort_Item"><SortTabItem title="可议价"/></span>
                </div>
                <div className="Home_Radio">
                    <Radio className="Home_Radio_Item">保险</Radio>
                    <Radio className="Home_Radio_Item">保障金</Radio>
                    <Radio className="Home_Radio_Item">fly派认证</Radio>
                </div>
                {/* <div style={{textAlign:"center"}}> */}
                <div className="Home_Goods">
                    <GoodNode heart={true} bag={true}/>
                    <GoodNode heart={true} bag={true}/>
                    <GoodNode heart={true} bag={true}/>
                    <GoodNode heart={true} bag={true}/>
                </div>
            </div>
          </div>
          <Carousel />

          <div className="Home_Study_Item Main_Container">
             <div className="Home_Study_Item_Top">
                 <div className="Home_Study_Item_Top_First">
                     <span className="Home_Study_T_L">我要学习</span>
                     <p><span className="Home_Study_T_S">I WANT TO LEARN</span></p>
                 </div>
                 <div>
                     <StudyInfo title="应试宝典" msg="Examination" msg2="treasure" img="Book"/>
                 </div>
                 <div>
                     <StudyInfo title="课件" msg="Courseware" img="CoursewareSVG"/>
                 </div>
                 <div>
                    <StudyInfo title="题库" msg="Item bank" img="ItemBank"/>
                 </div>
                 <div>
                    <StudyInfo title="应试宝典" msg="Mock exam" img="Exam"/>
                 </div>
                 <AOPA/>
             </div>
             <div className="Home_Study_Item_Bottom">
                 <div className="Home_Study__CourceLeft">
                    <FlyCourse width="420px"/>
                 </div>
                <div className="Home_Study_Middle">
                    <div className="H_S_M_E">航拍教学</div>
                    <div className="H_S_M_F">AERIAL PHOTOGRAPHY TEACHING</div>
                </div>
                <div className="Home_Study_right">
                    <div className="H_S_R_G">浏览更多</div>
                    <div className="H_S_R_H">MORE+</div>
                    <div className="H_S_R_I">
                        <Icon type="arrow-right" />
                    </div>
                </div>
             </div>
          </div>
          <div className="Home_Trade_Info Home_Middle">
              <div className="Home_Trade_Info_Grey">Pie hot spot</div>
              <h2><Bar/>派.热点<Bar/></h2>
              <div className="Home_Trade_Info_Grey">公司介绍什么的公司介绍什么的公司介绍什么的公司介绍什么的公司介绍什么的公司介</div>
              <div className="Home_HotMsg">
                        <span>
                            <ImageBox width="572px" height="344px" src="/assets/AD/info.png" msg="百万网友助力行动者联盟2019公益盛典"/>
                        </span>
                        <span  className="Home_HotSpot">
                            <span className="Home_HotSpot_Span">
                                <span className={this.state.infoSelect===""?"Home_HotSpot_Content ":"Home_HotSpot_Content HomeHotSpotActive"} onClick={e=>this.SwitchInfo(e)}>行业资讯</span>
                                <span className={this.state.lawSelect===""?"Home_HotSpot_Content ":"Home_HotSpot_Content HomeHotSpotActive"} onClick={e=>this.SwitchLaw(e)}>法律法规</span>
                            </span>
                            <span>
                                <ul className="Home_HotSpot_Ul Home_HotSpot_Msg" style={{display:showTabInfoVisible}}>
                                    {info}
                                </ul>
                                <ul className="Home_HotSpot_Ul Home_HotSpot_Msg" style={{display:showTabInfoLow}}>
                                    {law}
                                </ul>
                            </span>
                        </span>
              </div>
          </div>
          <Footer />
          
      </div>
    );
  }
}
export default Home;


